import React,{useState,useEffect} from 'react'
import { get_table } from '../../api'
import { useAppDispatch,useAppSelector} from '../../utils/hooks'
import { Space, Table, Tag } from 'antd';
import { Select } from 'antd';
import type { TableProps } from 'antd';
import Box from '../../components/Box'
import {setTable,sTable,delTable} from '../../store/module/table'
import staticMethods from 'antd/es/message'
import Hoc_login from '../../utils/Hoc_login';
interface Props {
    
}

const Index = (props: Props) => {
  //通过，未通过
    let  [flag,setFlag]=useState('')
    let  [val,setVal]=useState('请输入')
    
    const dispatch=useAppDispatch()
    useEffect(()=>{
      let getData= async ()=>{
         let res=await get_table();
         console.log(res)
         if(res.status==200){
            dispatch(setTable(res.data))
         }
      }
      getData()
    },[])
    
    const handleChange = (value: string) => {
  console.log(`selected ${value}`);
   setFlag(value)
};
    let table=useAppSelector(state=>{
      console.log(state)
      return  state.table.tableData
    })
    console.log(table)
    let searchTable=useAppSelector(state=>{
      console.log(state)
      return  state.table.searchTable
    })
    interface DataType {
  key: string;
  name: string;
  icon: string;
  address: string;
  date:string;
 flag:string
}
const columns: TableProps<DataType>['columns'] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '头像',
    dataIndex: 'icon',
    key: 'icon',
   render: (text) => <img src={text} />,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
   {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },
     {
    title: '状态',
    dataIndex: 'flag',
    key: 'flag',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a onClick={()=>edit(record)}>修改</a>
        <a onClick={()=>del(record.key)}>删除</a>
      </Space>
    ),
  },
];
const  [editVal,setEditVal]=useState({})
//编辑
const edit=(record:any)=>{
      console.log(record);
      setEditVal(record)
      //弹框显示
      showModal();
      setTitle('修改信息');

}
const del=(key:string)=>{
  console.log(key)
  if(window.confirm('您确定要删除码')){
      dispatch(delTable(key))
  }


}

//双向邦栋
const  changeN=(e:any)=>{
  setVal(e.target.value)
}

//搜索
const  search=()=>{
  let obj={
       val:val,
       flag:flag
  }
  console.log(obj)
     dispatch(sTable(obj))
      
}

//模态框
const [isModalOpen, setIsModalOpen] = useState(false);
const [title,setTitle]=useState('')
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const add=()=>{
    //调用弹框显示
    showModal();
    // 改变标题的内容
    setTitle('新增信息');
    // 弹框内容为空
  }
    return (
        <div>
          {/* 获取文本框的值 */}
      <input type="text" placeholder="请输入姓名"  value={val} onChange={changeN}/>
      {/* 下拉框的值 */}
       <Select
      defaultValue="通过"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: '拒绝', label: '拒绝' },
        { value: '通过', label: '通过' },
       
         
      ]}
    />
    <button onClick={search}>搜索</button>

  <p>
    <button onClick={add}>新增</button>
  </p>
  <Box isModalOpen={isModalOpen} handleOk={handleOk} handleCancel={handleCancel} 
  title={title} editVal={editVal}></Box>
 <Table columns={columns} dataSource={searchTable} />
           
        </div>
    )
}

export default Hoc_login(Index)
